<template>
	<view class="msg-wrap" style="width: 100%;">
		<!-- <img src="@/static/img/news_bg.png" width="100%" />
		<img class="msg-back" @click='back' src="@/static/img/common_btn_return_n.png" alt=""> -->
		<view class="msg-nav">
			<view class="msy-nav-item" @click="change_type(0)"><span :class="['',{'msg-active':msg_type==0}]">公告</span></view>
			<view class="msy-nav-item" @click="change_type(1)"><span :class="['',{'msg-active':msg_type==1}]">消息</span></view>
			<view class="msy-nav-item" @click="change_type(2)"><span :class="['',{'msg-active':msg_type==2}]">待办</span></view>
		</view>
		<view class="msg-list">
			<view v-for="item in msg_list" class="msg-list-item" @click="show_detail(item.id)">
				<view class="msg-list-item-1">{{item.title == null ? item.content : item.title}}</view>
				<view class="msg-list-item-2">{{item.content}}</view>
				<view class="msg-list-item-3"><img src="@/static/img/news_time.png"/> {{item.createDate}}</view>
			</view>
			
		</view>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex'
	import amap from "@/js_sdk/amap-wx.js";
	let _this;
	export default{
		data(){
			return{
				msg_type : 0,
				msg_list:[],
			}
		},
		created() {
			_this = this;
		},
		computed: mapState(['hasLogin', 'userName', 'token']),
		mounted() {
			this.get_msg();
		},
		methods:{
			back(){
				uni.navigateBack({
					delta:1
				})
			},
			show_detail(id){
				this.$router.push({
					path: '/AfterHandoverPerson',
					query: {
						id: id
						
					}
				});
			},
			get_msg(){
				uni.request({
					url: this.$store.state.ip + 'work/message/getMyMessage?type='+this.msg_type, 
					method: 'POST',
					header: {
						'Authorization': 'Bearer ' + this.token,
					},
					success: (res) => {
						if (res.data.code == 200) {
							_this.msg_list = res.data.data;
						} else if (res.data.code == '040081') {
				
							_this.$refs.uToast.show({
								title: '登录过期，请重新登录',
								url: '/pages/login/login',
								duration: 2000,
								position: 'bottom',
								params: {
									id: 1,
									menu: 3
								}
							})
				
							console.log(res);
						}else{
							_this.$refs.uToast.show({
								title: res.data.msg,
								duration: 2000,
								position: 'bottom',
							})
							
						}
				
				
					},
					fail: (res) => {
						console.log(res);
					}
				});
			},
			change_type(type){
				this.msg_type = type;
				this.get_msg();
			}
		}
	}
</script>

<style>
	.msg-list-item-1{
		font-size: 16px;
		color: #35374b;
		margin-bottom: 12px;
	}
	.msg-list-item-2{
		font-size: 13px;
		color: #A5A6AD;
		margin-bottom: 16px;
	}
	.msg-list-item-3{
		font-size: 11px;
		color: #A5A6AD;
	}
	.msg-list-item-3 img{
		float: left;
		margin:1.5px 5px 0 0;
	}
	.msg-list-item{
		background-color: #fff;
		border-radius: 4px;
		margin: 10px 12px 0px 12px;
		padding: 19px 18px 16px 18px;
		
	}
	.msg-list{
		height: calc(100% - 200px);
		overflow: auto;
	}
	.msg-active{
		display: inline-block;
		color: #35374B;
		border-bottom: 2.5px solid #0c66ea;
	}
	.msg-wrap{
		background-color: #f2f4f7;
		height: 100%;
	}
	.msg-back{
		position: absolute;
		top: 18px;
		left: 0px;
		padding: 12px;
	}
	.msg-nav{
		height: 45px;
		background-color: #fff;
		padding: 0px 12px;
		
	}
	.msy-nav-item{
		float: left;
		width: 33.33%;
		text-align: center;
		height: 45px;
		line-height: 45px;
		font-size: 15px;
		color: #A5A6AD;
		cursor: pointer;
	}
		
</style>
